<script>
import KtMap from "/src/components/common/KtMap.vue";
import MapSelectDialog from "/src/views/manage/iot/project/components/MapSelectDialog.vue";

export default {
  components: {MapSelectDialog, KtMap},
  data() {
    return {
      show: false,
      requestParam: {
        title: "",
        description: "",
        longitude: "",
        latitude: "",
        sn: ""
      },
      loading: false
    }
  },
  mounted() {
  },
  methods: {
    // 初始化地图
    open(requestParam) {
      if (!requestParam) {
        this.requestParam = {
          title: "",
          description: "",
          longitude: "",
          latitude: "",
          sn: ""
        };
        this.show = true;
        return;
      }
      this.requestParam = JSON.parse(JSON.stringify(requestParam));
      this.show = true;

    },
    // 关闭
    close() {
      this.show = false;
    },
    // 地图选择
    mapSelect(data) {
      this.requestParam.longitude = data.longitude+"";
      this.requestParam.latitude = data.latitude+"";
      // 保留后5位
      this.requestParam.longitude = this.requestParam.longitude.substring(0, this.requestParam.longitude.indexOf(".") + 6);
      this.requestParam.latitude = this.requestParam.latitude.substring(0, this.requestParam.latitude.indexOf(".") + 6);
    },
    toSave() {
      if (this.loading) {
        return;
      }

      if (!this.requestParam.sn) {
        this.$message.error(this.$i18n.zhToGlobal('请输入SN'));
        return;
      }

      if (!this.requestParam.title) {
        this.$message.error(this.$i18n.zhToGlobal('请输入标题'));
        return;
      }

      if (!this.requestParam.longitude || !this.requestParam.latitude) {
        this.$message.error(this.$i18n.zhToGlobal('请选择经纬度'));
        return;
      }




      this.loading = true;
      // element的loading
      let loading = this.$loading({
        lock: true,
        text: this.$i18n.zhToGlobal('保存中'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotProject/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success(this.$i18n.zhToGlobal('保存成功'));
          this.close();
          this.loading = false;
          loading.close();
          this.$emit("save");
          this.requestParam = {
            title: "",
            description: "",
            longitude: "",
            latitude: "",
            sn: ""
          };
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
          loading.close();
        }
      });
    }
  }
}
</script>

<template>
  <el-dialog
      draggable
      width="300px"
      v-model="show"
      :title="$i18n.zhToGlobal('保存项目')"
      @close="close"
  >
    <el-form
        label-position="top"
        :model="requestParam" label-width="80px">
      <el-form-item label="SN">
        <el-input v-model="requestParam.sn"></el-input>
      </el-form-item>

      <el-form-item :label="$i18n.zhToGlobal('标题')">
        <el-input v-model="requestParam.title"></el-input>
      </el-form-item>
      <el-form-item :label="$i18n.zhToGlobal('描述')">
        <el-input
            type="textarea"
            v-model="requestParam.description"></el-input>
      </el-form-item>
      <!-- 经纬度 -->
      <el-form-item :label="$i18n.zhToGlobal('经纬度')">
        <el-button
            v-if="!requestParam.longitude || !requestParam.latitude"
            style="width: 100%"
            @click="()=>this.$refs.mapSelectDialog.open()">
          {{ $i18n.zhToGlobal('选择经纬度') }}
        </el-button>
        <el-button
            v-else
            style="width: 100%"
            @click="()=>this.$refs.mapSelectDialog.open(requestParam)">
          {{ requestParam.longitude }}{{" , "}}{{ requestParam.latitude }}
        </el-button>
      </el-form-item>
    </el-form>
    <div style="height: 40px"></div>
    <el-button
        @click="toSave"
        type="primary"
        style="width: 100%;position: absolute;bottom: 0;left: 0;border-radius: 0 0 3px 3px"
    >
      {{ $i18n.zhToGlobal('保存') }}
    </el-button>
  </el-dialog>

  <map-select-dialog
      @select="mapSelect"
      ref="mapSelectDialog"></map-select-dialog>

</template>

<style scoped lang="scss">
.map-box {
  // 超出不显示
  overflow: hidden;
}
</style>